<template>
  <div class="out">
    <!-- <i class="iconfont icon-wangyiyunyinyueclick logo"></i> -->
    <!-- <nut-icon class="logo" font-class-name="iconfont" class-prefix="icon" name="wangyiyunyinle" /> -->

    <nut-icon
      class="logo"
      size="80"
      name="https://infinityicon.infinitynewtab.com/user-share-icon/610959ecfad2fb3368d13aa1c25e3ec3.png"
    ></nut-icon>
    <div class="main">
      <nut-input
        type="digit"
        v-model="form.phone"
        label="手机号"
        placeholder="请输入手机号"
        @blur="verifyPhone"
      />
      <nut-input
        type="digit"
        v-model="form.captcha"
        label="短信验证码"
        placeholder="验证码"
        clearable
        center
      >
        <template #button>
          <nut-button size="small" type="primary" color="#f32a25"
            >发送验证码</nut-button
          >
        </template>
      </nut-input>
    </div>
    <div class="bottom">
      <div class="phone">
        <nut-icon
          class="first"
          size="30"
          font-class-name="iconfont"
          class-prefix="icon"
          name="renshu"
        />

        <div>手机登录</div>
      </div>
      <div class="tourist">
        <nut-icon
          class="first"
          size="30"
          font-class-name="iconfont"
          class-prefix="icon"
          name="iphone"
        />
        <div>游客访问</div>
      </div>
    </div>
    <div class="infor">
      <div>登录接口为官方提供</div>
      <div>您在此输入的信息不会发送给任何个人</div>
      <div>仅用于该项目获取您的软件用户信息</div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const form = ref({
      phone: "",
      captcha: "",
    });
    // 检测手机号码是否已注册
    const verifyPhone = (val)=>{
      
    }

    return { phoneShow, form };
  },
};
</script>

<style lang="scss">
.out {
  height: 100vh;
  background-color: #db2b1e;

  .logo {
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 50%;
    width: 90px;
    height: 90px;
    background-color: #f32a25;
    border-radius: 45px;
    text-align: center;
    font-size: 70px;
    color: red;
  }

  .bottom {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 0 auto;
    margin-top: 30%;
    font-size: 45px;
    color: #fff;

    .phone {
      .first {
        margin-left: 50%;
        transform: translateX(-50%);
      }

      & > div {
        font-size: 15px;
      }
    }

    .tourist {
      .first {
        margin-left: 50%;
        transform: translateX(-55%);
      }

      & > div {
        font-size: 15px;
      }
    }
  }

  .infor {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 8px;
  }

  // .nut-input {
  //   background-color: #db2b1e;
  //   border-bottom-color:#db2b1e;
  //   color: #fff;
  //   & > .input-text {
  //     color: #fff;
  //   }
  // }
  .main {
    width: 90%;
    margin: 50px auto;
  }
}
</style>
